import React, { useEffect, useRef, useState } from 'react'
import { ArrowLeft, OrdersO } from '@react-vant/icons';
import './week.css'
import { useNavigate } from 'react-router-dom';
import * as echarts from 'echarts';
import { Calendar, Toast } from 'react-vant';

export default function Month() {
  const Navigate=useNavigate()
  const formatDate = date => `${date.getMonth() + 1}/${date.getDate()}`
  return (
    <div>
      <div className='week-head'>
        <span className='week-head-bor'><ArrowLeft onClick={()=>{Navigate('/steps')}} /></span>
        <span>运动时间</span>
        <span></span>
      </div>

      <div className='target-content'>
        <div className='target-content-bor'>
          <Calendar
            style={{ height: 500 ,background:"green",color:"#fff",width:'90vw',margin:'0 auto',borderRadius:'15px'}}
            showConfirm={false}
            poppable={false}
            horizontal={true}
            onConfirm={v => {
              Toast.info(formatDate(v))
            }}
          />
          <div className='week-content-bor'>
            <div className='week-con'>
                <p style={{color:"#797979"}}>周步数</p>
                <p>0/1000</p>
                <p style={{color:"#797979"}}>距离</p>
                <p>0 km</p>
                <p style={{color:"#797979"}}>卡路里</p>
                <p>0 kcal</p>
            </div>
            
            <button className='week-but' onClick={()=>{Navigate('/tsteps')}}>编辑目标</button>
        </div>
        </div>
        
      </div>
    </div>
  )
}
